<template>
  <div class="page-view">
    <div class="wrapper">
      <div class="top">
        <img
          src="~assets/pay/payFail.png"
          class="pic"
        >
        <p class="tip">
          支付失败，请重新支付
        </p>
      </div>
      <router-link
        tag="div"
        :to="{name: 'home'}"
        class="back-home"
      >
        返回首页
      </router-link>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  beforeRouteLeave (to, from, next) {
    if (to.name === 'pay') {
      next(false)
      this.$router.push({ name: 'home' })
    } else {
      next()
    }
  },
})
</script>

<style lang="scss" scoped>
.page-view {
  height: 100%;
  background: #fff;
}
.wrapper {
  height: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  color: #666;
  padding-top: 25%;
  text-align: center;
}
.pic {
  width: 160px;
  height: 160px;
}
.tip {
  margin: 20px 0 58px;
  font-size: 36px;
}
.back-home {
  width: 280px;
  height: 80px;
  line-height: 79px;
  font-size: 36px;
  border-radius:3px;
  color: $primary-web;
  @include px1border(all, $primary-web);
}
</style>
